<template>
	<view>
		<!-- 购物车明细 -->
		<uni-popup ref="popup" style="	z-index: 2;" type="bottom" background-color="#fff" border-radius="10px 10px 0 0"
			:show="true" @close="closePopup">
			<view style="border-bottom: 1rpx solid #E5E5E5;padding:24rpx 0 32rpx; text-align: center; ">金额明细
			</view>
			<view class="flex-colomn">
				<uni-icons class="close-btn" type="closeempty" size="20" @click="closePopup"></uni-icons>
				<!-- 商品列表弹框 -->
				<view class="goodsOpen">
					<uni-row class="demo-uni-row">
						<view class="goods_List">
							<uni-grid :column="4" :clickable="false" :highlight="false" :showBorder="false">
								<uni-grid-item v-for="(item, index) in optionGoodsList" :index="index" :key="index">
									<view class="grid-item-box">
										<image :src="item.imgUrl"></image>
										<radio-group @click="checkFGoods(item)">
											<radio color="#FA541C" class="radio" :checked="item.checked" />
										</radio-group>
									</view>
								</uni-grid-item>
							</uni-grid>
							<view class="goods_btn" @click="openAllGoods" v-if="cartGoods.goodsCount>4">
								已选{{cartGoods.goodsCount}}件</view>
						</view>
					</uni-row>
					<uni-row class="demo-uni-row">
						<view class="cartPrice">
							<view class="dishPrice">菜品单价：<text>¥ {{cartGoods.dishPrice}}</text></view>
							<view class="dishTotalPrice">菜品总价：<text>¥ {{cartGoods.dishTotalPrice}}</text></view>
							<view class="weddingTotal">婚庆总价：<text>¥ {{cartGoods.weddingTotal}}</text></view>
							<view class="liquorTotal">酒水/纸抽：<text>¥ {{cartGoods.liquorTotal}}</text></view>
							<view class="totalPrice">合计：<text>¥ {{cartGoods.totalPrice}}</text></view>
						</view>
					</uni-row>
				</view>
			</view>
		</uni-popup>
		<!-- 购物车样式 -->
		<view class="goods-carts">
			<view class="checked">
				<!-- <checkbox color="#55aa7f" :checked="isChecked">全选</checkbox>
				 -->
				<label class="radio" @click="changeAll">
					<radio color="#FA541C" :checked="cartGoods.isChecked">全选</radio>
				</label>
			</view>
			</uni-col> <!-- 合计未选中 -->
			<view class="amount_not" v-show="!cartGoods.isChecked">合计：<text>¥ {{cartGoods.totalPrice}}</text></view>
			<!-- 合计已选中 -->
			<view class="amount_yes" v-show="cartGoods.isChecked">
				<view class="amount_text">已选{{cartGoods.goodsCount}}个 &nbsp;合计：<text
						style="font-size: 2upx;">¥</text><text>
						{{cartGoods.totalPrice}}</text>
				</view>
				<view class="amount_goods" @click="open"> 商品明细</view>
			</view>
			<!-- 提交订单按钮 -->
			<view class="comit_button">
				<button>去结算</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				isChecked: false,
				openGoods: false,
				openShow: false,
				cartProcut: {
					totalPrice: 0.00
				},
				cartList: [],
				goodsCount: 0
			}
		},
		methods: {
			...mapActions(['getCartGoodsList', 'queryCartGoods', 'queryOptionGoodsList']),
			//弹出购物车中选中的商品列表
			open() {
				this.cartList = []
				this.queryCartGoods()
				this.cartList = this.$store.state.cartGoods.optionGoodsList
				this.queryOptionGoodsList()
				this.openShow = !this.openShow;
				if (this.openShow) {
					this.$refs.popup.open('bottom')
				} else {
					this.closePopup()
				}

			},
			//打开全部商品
			openAllGoods() {
				this.openGoods = !this.openGoods
				this.cartList = []
				if (this.openGoods) {
					this.$store.state.optionGoodsList = this.$store.state.cartGoods.cartList
				} else {
					this.$store.state.optionGoodsList = []
					this.$store.state.optionGoodsList.push(this.$store.state.cartGoods.cartList[0])
					this.$store.state.optionGoodsList.push(this.$store.state.cartGoods.cartList[1])
					this.$store.state.optionGoodsList.push(this.$store.state.cartGoods.cartList[2])
					this.$store.state.optionGoodsList.push(this.$store.state.cartGoods.cartList[3])
				}
			},
			changeAll() {
				this.cartGoods.isChecked = !this.cartGoods.isChecked;
				if (this.cartGoodsList.length > 0) {
					for (let i = 0; i < this.cartGoodsList.length; i++) {
						this.cartGoodsList[i].checked = this.isChecked
					}
					// console.log(this.cartGoodsList)
				}
				const data = {}
				data.type = this.cartGoods.isChecked ? "YES" : "NO";
				data.cartStatus = this.cartGoods.isChecked ? 1 : 0;
				this.updateCartStatus(data)
				this.$refs.popup.close()

			},
			//点击选种购物车商品信息
			checkFGoods(info) {
				info.checked = !info.checked
				info.type = "NO"
				info.cartStatus = info.checked ? 1 : 0;
				this.updateCartStatus(info)
			},
			//更新购物车状态
			async updateCartStatus(params) {
				const {
					status,
					data,
					msg
				} = await this.$api.cart.updateCartStatus(params)
				if (status == 200) {
					this.getCartGoodsList()
					this.queryCartGoods()
				}
			},
			//查询选种的购物车商品列表
			async queryCartProductInfo() {
				const {
					status,
					data,
					msg
				} = await this.$api.cart.queryCartProductInfo()
				if (status == 200) {
					this.cartProcut = data
				}
			},
			closePopup() {
				this.$refs.popup.close()
			}
		},
		computed: {
			...mapState(['cartGoodsList', 'cartGoods', 'optionGoodsList', 'isAuth']),
		},
		onLoad() {}
	}
</script>


<style scoped lang="less">
	//底部提交订单区域
	.goods-carts {
		width: 100%;
		position: fixed;
		height: 10%;
		background-color: #f1f1f1;
		position: absolute;
		bottom: 0upx;
		flex: 1;
		display: flex;
		z-index: 2;

		//是否全选
		.checked {
			max-width: 20%;
			line-height: 100upx;
			font-size: 28upx;
			margin-left: 10upx;
		}

		//合计未选中
		.amount_not {
			min-width: 40%;
			line-height: 100upx;
			margin-left: 10upx;
			font-size: 28upx;

			text {
				color: red;
			}
		}

		//合计 已选中
		.amount_yes {
			min-width: 40%;
			// background-color: red;
			height: 100upx;
			// line-height: 100upx;
			margin-left: 10upx;
			font-size: 28upx;

			//合计样式
			.amount_text {
				width: 100%;
				height: 60upx;
				font-size: 25upx;
				line-height: 60upx;

				text {
					margin-left: 2upx;
					font-size: 30upx;
					color: red;
					font-weight: bold;
				}
			}

			//商品明细
			.amount_goods {
				width: 100%;
				height: 30upx;
				font-size: 23upx;
				line-height: 30upx;
				margin: auto;
				background-color: #d2d1d1;
				text-align: center;
				color: #FA541C;
				font-weight: bold;
				border-radius: 40upx;
			}

		}

		//提交订单按钮
		.comit_button {
			min-width: 10%;
			height: 100upx;
			line-height: 100upx;
			margin-left: 150upx;
			margin-top: 20upx;
			// background-color: red;

			button {
				height: 60upx;
				line-height: 60upx;
				background: #FA541C;
				color: white;
				border-radius: 40upx;
			}
		}
	}

	//商品明细弹出框
	.goodsOpen {
		// display: flex;
		// justify-content: center;
		// align-items: flex-start;
		height: 50vh;
		overflow-y: auto;
		/* 内容超出时显示垂直滚动条 */
		// font-size: 25px;
		margin-top: 20rpx;
		padding-bottom: 10upx;

		//购车商品列表样式
		.goods_List {
			width: 90%;
			height: 100%;
			margin-left: 10upx;

			//单个菜单
			.grid-item-box {
				width: 100%;
				// text-align: center;
				font-size: 28upx;
				position: relative;

				image {
					width: 150upx;
					height: 150upx;
					border-radius: 10%;
					/* 水平半径/垂直半径 */
					// background: #eefeff;

				}

				.radio {
					position: absolute;
					top: 0;
					right: 0;
					margin-right: 10upx;
				}

			}

			//点击按钮
			.goods_btn {
				width: 120upx;
				height: 30upx;
				line-height: 30upx;
				font-size: 25upx;
				margin: auto;
				background-color: #d2d1d1;
				text-align: center;
				// color: #FA541C;
				// font-weight: bold;
				border-radius: 40upx;

			}
		}

		//购物车价格明细
		.cartPrice {
			width: 100%;
			height: 100%;
			font-size: 30upx;
			padding-left: 20upx;

			//菜品单价
			.dishPrice {
				font-size: 30upx;
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				margin-top: 10upx;
			}

			//菜品总价
			.dishTotalPrice {
				font-size: 30upx;
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				margin-top: 10upx;
			}

			//婚庆价格
			.weddingTotal {
				font-size: 30upx;
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				margin-top: 10upx;
			}

			//酒水/纸抽价格
			.liquorTotal {
				font-size: 30upx;
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				margin-top: 10upx;
			}

			//合计
			.totalPrice {
				font-size: 32upx;
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				margin-top: 20upx;

				text {

					font-weight: bold;
					color: red;
				}

			}
		}
	}

	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		cursor: pointer;

	}
</style>